import { createWebHistory, createRouter } from "vue-router";

// import Home from "../pages/home/Index.vue";
// import City from "../pages/city/Index.vue";
// import Detail from "../pages/detail/Index.vue";
// import NotFound from "../pages/notFound/Index.vue";

// import Movies from "../pages/home/movies/Index.vue";
// import Video from "../pages/home/video/Index.vue";
// import Show from "../pages/home/show/Index.vue";
// import Mine from "../pages/home/mine/Index.vue";

// 路由表
const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    // 异步路由组件加载
    component: () => import("../pages/home/Index.vue"),
    children: [
      {
        path: "/home",
        redirect: "/home/movies",
      },
      {
        path: "/home/movies",
        component: () => import("../pages/home/movies/Index.vue"),
        children: [
          {
            path: "/home/movies",
            redirect: "/home/movies/hot",
          },
          {
            path: "/home/movies/hot",
            component: () => import("../pages/home/movies/hot/Index.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "/home/movies/cinema",
            component: () => import("../pages/home/movies/cinema/Index.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "/home/movies/wait",
            component: () => import("../pages/home/movies/wait/Index.vue"),
            meta: {
              requireAlive: true,
            },
          },
          {
            path: "/home/movies/classic",
            component: () => import("../pages/home/movies/classic/Index.vue"),
            meta: {
              requireAlive: false,
            },
          },
        ],
      },
      {
        path: "/home/video",
        component: () => import("../pages/home/video/Index.vue"),
      },
      {
        path: "/home/show",
        component: () => import("../pages/home/show/Index.vue"),
        // meta: {
        //   requireLogin: true,
        //   title: "猫眼演出",
        // },
      },
      {
        path: "/home/mine",
        component: () => import("../pages/home/mine/Index.vue"),
        // meta表示路由元信息
        // meta是一个对象，什么都可以放
        // 一般都是要配合全局前置守卫进行使用
        // meta: {
        //   requireLogin: true,
        //   title: "我的猫眼",
        // },

        // 路由独享守卫
        beforeEnter: (to, from, next) => {
          if (localStorage.getItem("token")) {
            next();
          } else {
            next("/login");
          }
        },
      },
    ],
  },
  {
    path: "/city",
    component: () => import("../pages/city/Index.vue"),
  },
  {
    path: "/detail/:id",
    component: () => import("../pages/detail/Index.vue"),
  },
  {
    path: "/login",
    component: () => import("../pages/login/Index.vue"),
  },
  {
    path: "/:pathMatch(.*)*",
    component: () => import("../pages/notFound/Index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

// 在路由实例暴露之前，添加全局前置守卫
// beforeEach在每一个页面跳转之前都会执行
// router.beforeEach((to, from, next) => {
//   // to表示的是要去的那个页面的路由信息(this.$route)
//   // console.log(to);
//   // from表示的是来的那个页面的路由信息(this.$route)
//   // console.log(from);

//   // next()表示放行
//   // next(false)表示不让跳转
//   // next("/xxx")表示重定向
//   // next();

//   // 路由鉴权
//   // if (to.path === "/home/mine") {
//   if (to.meta.requireLogin) {
//     if (localStorage.getItem("token")) {
//       next();
//     } else {
//       next("/login");
//     }
//   } else {
//     next();
//   }

//   // console.log(to.meta.requireLogin);
//   // next();
// });

// 全局解析守卫
// 语法和功能上来说，和全局前置守卫完全一样
// beforeResolve只是比beforeEach的执行时机更迟
// router.beforeResolve((to, from, next) => {
//   document.title = to.meta.title || "猫眼电影 - 娱乐看我的";
//   // 路由鉴权
//   // if (to.path === "/home/mine") {
//   if (to.meta.requireLogin) {
//     if (localStorage.getItem("token")) {
//       next();
//     } else {
//       next("/login");
//     }
//   } else {
//     next();
//   }
// });

// 全局后置钩子，是在页面跳转完以后再执行
// 只有to和from,没有next
// 就不能在这里进行路由拦截
// router.afterEach((to, from) => {
//   document.title = to.meta.title || "猫眼电影 - 娱乐看我的";
// });

export default router;
